'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends12 = require('babel-runtime/helpers/extends');

var _extends13 = _interopRequireDefault(_extends12);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _collapse = require('antd/lib/collapse');

var _collapse2 = _interopRequireDefault(_collapse);

var _reactLifecyclesCompat = require('react-lifecycles-compat');

var _Font = require('./components/Font');

var _Font2 = _interopRequireDefault(_Font);

var _BackGround = require('./components/BackGround');

var _BackGround2 = _interopRequireDefault(_BackGround);

var _Border = require('./components/Border');

var _Border2 = _interopRequireDefault(_Border);

var _Interface = require('./components/Interface');

var _Interface2 = _interopRequireDefault(_Interface);

var _Margin = require('./components/Margin');

var _Margin2 = _interopRequireDefault(_Margin);

var _Shadow = require('./components/Shadow');

var _Shadow2 = _interopRequireDefault(_Shadow);

var _Css = require('./components/Css');

var _Css2 = _interopRequireDefault(_Css);

var _Transition = require('./components/Transition');

var _Transition2 = _interopRequireDefault(_Transition);

var _State = require('./components/State');

var _State2 = _interopRequireDefault(_State);

var _ClassName = require('./components/ClassName');

var _ClassName2 = _interopRequireDefault(_ClassName);

var _Layout = require('./components/Layout');

var _Layout2 = _interopRequireDefault(_Layout);

var _zh_CN = require('./locale/zh_CN');

var _zh_CN2 = _interopRequireDefault(_zh_CN);

var _utils = require('./utils');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var stateSort = { 'default': 0, hover: 1, focus: 2, active: 3 };

var EditorList = function (_Component) {
    (0, _inherits3['default'])(EditorList, _Component);
    (0, _createClass3['default'])(EditorList, null, [{
        key: 'getDerivedStateFromProps',
        value: function getDerivedStateFromProps(props, _ref) {
            var prevProps = _ref.prevProps,
                $self = _ref.$self,
                classState = _ref.classState,
                cssValue = _ref.cssValue,
                cssName = _ref.cssName;

            var nextState = {
                prevProps: props
            };
            if (prevProps) {
                if (prevProps.editorElem !== props.editorElem) {
                    $self.defaultValue = {};
                    $self.defaultData = {};
                    $self.editClassName = $self.getClassName(props);
                    nextState = (0, _extends13['default'])({}, nextState, $self.setDefaultState(props.editorElem, props));
                }
                if (prevProps.isMobile !== props.isMobile) {
                    var domStyle = $self.getDefaultValue(props.editorElem, props.isMobile, classState);
                    $self.defaultValue[classState] = domStyle;
                    var value = $self.getDefaultData(domStyle);
                    $self.defaultData = value;
                    nextState = (0, _extends13['default'])({}, nextState, {
                        cssValue: (0, _extends13['default'])({}, cssValue, (0, _defineProperty3['default'])({}, cssName, (0, _extends13['default'])({}, cssValue[cssName], {
                            value: value
                        }))),
                        classState: classState,
                        cssName: cssName
                    });
                }
            }
            return nextState;
        }
    }]);

    function EditorList(props) {
        (0, _classCallCheck3['default'])(this, EditorList);

        var _this = (0, _possibleConstructorReturn3['default'])(this, (EditorList.__proto__ || Object.getPrototypeOf(EditorList)).call(this, props));

        _initialiseProps.call(_this);

        _this.select = {};
        _this.defaultValue = {};
        _this.defaultData = {};
        _this.currentData = {};
        _this.cssString = '';
        _this.currentEditCssString = '';
        _this.state = (0, _extends13['default'])({}, _this.setDefaultState(props.editorElem, props), {
            $self: _this
        });
        _this.setEditorElemClassName();
        return _this;
    }

    (0, _createClass3['default'])(EditorList, [{
        key: 'componentDidUpdate',
        value: function componentDidUpdate(prevProps) {
            if (prevProps.editorElem !== this.props.editorElem) {
                this.setEditorElemClassName(this.props);
                var inDom = this.getInDom(prevProps.editorElem, this.prevParentClassName);
                if (!this.cssString && !inDom) {
                    prevProps.editorElem.className = (0, _utils.removeEditClassName)(prevProps.editorElem.className, prevProps.editorDefaultClassName);
                }
            }
        }
    }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {
            var _props = this.props,
                editorElem = _props.editorElem,
                editorDefaultClassName = _props.editorDefaultClassName;

            var inDom = this.getInDom(editorElem);
            if (!this.cssString && !inDom) {
                editorElem.className = (0, _utils.removeEditClassName)(editorElem.className, editorDefaultClassName);
            }
        }
    }, {
        key: 'render',
        value: function render() {
            var _props2 = this.props,
                useClassName = _props2.useClassName,
                editorElem = _props2.editorElem,
                onChange = _props2.onChange,
                props = (0, _objectWithoutProperties3['default'])(_props2, ['useClassName', 'editorElem', 'onChange']);


            return _react2['default'].createElement(
                _collapse2['default'],
                (0, _extends13['default'])({ bordered: false }, props),
                this.getChildren(this.props)
            );
        }
    }]);
    return EditorList;
}(_react.Component);

EditorList.propTypes = {
    className: _propTypes2['default'].string,
    defaultActiveKey: _propTypes2['default'].any,
    editorElem: _propTypes2['default'].any,
    onChange: _propTypes2['default'].func,
    useClassName: _propTypes2['default'].bool,
    isMobile: _propTypes2['default'].bool,
    parentClassNameCanUseTagName: _propTypes2['default'].bool,
    parentClassNameLength: _propTypes2['default'].number,
    rootSelector: _propTypes2['default'].string,
    editorDefaultClassName: _propTypes2['default'].string,
    cssToDom: _propTypes2['default'].bool,
    locale: _propTypes2['default'].object,
    onImageSelectClick: _propTypes2['default'].func,
    imageSelect: _propTypes2['default'].bool
};
EditorList.defaultProps = {
    className: 'editor-list',
    defaultActiveKey: ['EditorClassName'],
    useClassName: true,
    onChange: function onChange() {},
    isMobile: false,
    parentClassNameCanUseTagName: true,
    parentClassNameLength: 2,
    editorDefaultClassName: 'editor_css',
    cssToDom: true,
    locale: _zh_CN2['default'],
    onImageSelectClick: function onImageSelectClick(img) {},
    imageSelect: false
};

var _initialiseProps = function _initialiseProps() {
    var _this2 = this;

    this.onStateChange = function (key, data) {
        if (key === 'cursor') {
            var value = {
                cursor: data === 'auto' ? null : data
            };
            _this2.onChange('state', value);
        } else {
            _this2.onChangeCssState(data);
        }
    };

    this.onChangeCssState = function (classState) {
        var _props3 = _this2.props,
            onChange = _props3.onChange,
            isMobile = _props3.isMobile,
            editorElem = _props3.editorElem,
            editorDefaultClassName = _props3.editorDefaultClassName;

        var domStyle = _this2.getDefaultValue(editorElem, isMobile, classState);
        _this2.currentData[classState] = _this2.getDefaultData(domStyle);
        // 设置默认;
        _this2.setDefaultData({
            isMobile: isMobile, dom: editorElem, classState: classState
        });
        var _state = _this2.state,
            cssName = _state.cssName,
            cssValue = _state.cssValue;

        _this2.cssString = _this2.getAllCssString();
        _this2.currentEditCssString = _this2.getCurrentEditCssString();
        var newCssValue = (0, _extends13['default'])({}, cssValue, (0, _defineProperty3['default'])({}, cssName, (0, _extends13['default'])({}, cssValue[cssName], {
            value: _this2.currentData[classState],
            classState: classState
        })));
        _this2.setState({
            cssValue: newCssValue,
            classState: classState
        });
        var $cssName = cssName === _this2.editClassName ? cssName + '-' + editorDefaultClassName : cssName;
        onChange({
            parentClassName: _this2.parentClassName,
            cssValue: newCssValue,
            cssName: $cssName,
            id: _this2.getEditId($cssName),
            editClassName: _this2.editClassName,
            cssString: _this2.cssString,
            currentEditCssString: _this2.currentEditCssString
        });
    };

    this.onClassNameChange = function (cssName) {
        var cssValue = _this2.state.cssValue;
        var _props4 = _this2.props,
            editorElem = _props4.editorElem,
            isMobile = _props4.isMobile;

        var classState = 'default';
        var domStyle = (0, _utils.getClassNameCssRule)({ dom: editorElem, className: cssName, isMobile: isMobile, state: null, getObject: true });
        var value = _this2.getDefaultData(domStyle);
        _this2.setDefaultData({
            isMobile: isMobile, dom: editorElem, classState: classState, cssName: cssName
        });
        var state = {
            cssName: cssName,
            classState: classState
        };
        if (!cssValue[cssName]) {
            var newCssValue = _this2.getStateCSSValue(cssName, classState, domStyle, value);
            state.cssValue = (0, _extends13['default'])({}, cssValue, newCssValue);
        }
        _this2.setState(state);
        // 变更样式时不回调
    };

    this.onCssChange = function ($cssValue) {
        var isMobile = _this2.props.isMobile;
        var _state2 = _this2.state,
            cssValue = _state2.cssValue,
            cssName = _state2.cssName,
            classState = _state2.classState;
        var _cssValue$cssName = cssValue[cssName],
            css = _cssValue$cssName.css,
            mobileCss = _cssValue$cssName.mobileCss;

        var myCss = isMobile ? mobileCss : css;
        _this2.setState({
            cssValue: (0, _extends13['default'])({}, cssValue, (0, _defineProperty3['default'])({}, cssName, (0, _extends13['default'])({}, cssValue[cssName], (0, _defineProperty3['default'])({}, isMobile ? 'mobileCss' : 'css', (0, _extends13['default'])({}, myCss, (0, _defineProperty3['default'])({}, classState, $cssValue))))))
        }, _this2.onCssChangeAfter);
    };

    this.onCssChangeAfter = function () {
        var _props5 = _this2.props,
            editorElem = _props5.editorElem,
            isMobile = _props5.isMobile;
        var _state3 = _this2.state,
            cssValue = _state3.cssValue,
            cssName = _state3.cssName,
            classState = _state3.classState;

        _this2.setCssToDom();
        // 关联编辑器里的参性, 后期忧化;
        var domStyle = _this2.getDefaultValue(editorElem, isMobile, classState);
        var value = _this2.getDefaultData(domStyle);
        _this2.currentData[classState] = value;
        _this2.setState({
            cssValue: (0, _extends13['default'])({}, cssValue, (0, _defineProperty3['default'])({}, cssName, (0, _extends13['default'])({}, cssValue[cssName], {
                value: value
            })))
        });
    };

    this.onChange = function (key, data, isDrag) {
        var _state4 = _this2.state,
            cssValue = _state4.cssValue,
            classState = _state4.classState,
            cssName = _state4.cssName;
        var _cssValue$cssName2 = cssValue[cssName],
            value = _cssValue$cssName2.value,
            css = _cssValue$cssName2.css,
            mobileCss = _cssValue$cssName2.mobileCss;

        var myCss = _this2.props.isMobile ? mobileCss : css;
        var v = (0, _extends13['default'])({}, value, (0, _defineProperty3['default'])({}, key, data));
        var newCss = '  ' + (0, _utils.toCss)(v, _this2.defaultData).replace(/\n/g, '\n  ');
        var currentCss = newCss.split('\n').filter(function (c) {
            return c;
        }).map(function (c) {
            return c.trim();
        });
        var stateCss = myCss[classState];
        if (stateCss) {
            var stateCssArray = stateCss.replace(/\s+;/g, ';').split('\n').map(function (c) {
                return c.trim();
            }).filter(function (c) {
                return c;
            });
            var currentCssName = currentCss.map(function (str) {
                return str.split(':')[0].trim();
            });
            var borderArray = currentCssName.filter(function (c) {
                return c === 'border-style' || c === 'border-color' || c === 'border-width';
            });
            borderArray.forEach(function (c) {
                var reg = new RegExp('border(.*)' + c.split('-')[1] + '.*');
                stateCssArray = stateCssArray.filter(function (d) {
                    return !d.match(reg);
                });
            });
            var stateNewCss = stateCssArray.map(function (str) {
                var $cssName = str.split(':')[0].trim();
                return currentCssName.indexOf($cssName) >= 0 || _utils.styleInUse[$cssName] ? null : str;
            }).filter(function (c) {
                return c;
            });
            newCss = '  ' + (stateNewCss.join('\n  ') + '\n  ' + currentCss.join('\n  ')).trim();
        }
        _this2.currentData[classState] = v;
        var state = (0, _extends13['default'])({}, cssValue[cssName], (0, _defineProperty3['default'])({
            value: v
        }, _this2.props.isMobile ? 'mobileCss' : 'css', (0, _extends13['default'])({}, myCss, (0, _defineProperty3['default'])({}, classState, newCss))));
        var newCssValue = (0, _extends13['default'])({}, cssValue, (0, _defineProperty3['default'])({}, cssName, state));
        if (isDrag) {
            _this2.state.cssValue = newCssValue;
            _this2.setCssToDom(isDrag);
        } else {
            _this2.setState({
                cssValue: newCssValue
            }, function () {
                _this2.setCssToDom(isDrag);
            });
        }
    };

    this.getInDom = function (dom, parentClassName) {
        return dom.className.split(' ').filter(function (c) {
            return c;
        }).some(function (str) {
            var id = _this2.getEditId(str, parentClassName);
            return _this2.ownerDocument.getElementById(id);
        });
    };

    this.getEditId = function (str, parentClassName) {
        return ((parentClassName || _this2.parentClassName) + '.' + str).replace(/[^a-z]/ig, '');
    };

    this.getStateCSSValue = function (cssName, classState, domStyle, value) {
        var props = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : _this2.props;
        var editorDefaultClassName = props.editorDefaultClassName;
        // 获取已插入在 dom 里的编辑值；

        var css = _this2.getDefaultCssData(cssName === _this2.editClassName ? cssName + '-' + editorDefaultClassName : cssName);
        _this2.currentData = {};
        if (props.useClassName) {
            _this2.currentData[classState] = _this2.getDefaultData(domStyle);
        } else {
            _this2.currentData['default'] = value;
        }
        return (0, _defineProperty3['default'])({}, cssName, {
            value: value,
            css: css.css,
            mobileCss: css.mobileCss,
            cssName: cssName,
            classState: classState
        });
    };

    this.getDefaultValue = function (dom, isMobile, state) {
        var domStyle = {};
        if (_this2.props.useClassName) {
            if (state !== 'default') {
                domStyle = (0, _extends13['default'])({}, _this2.defaultValue['default'], (0, _utils.getDomCssRule)({ dom: dom, isMobile: isMobile, state: state }));
            } else {
                domStyle = (0, _utils.getDomCssRule)({ dom: dom, isMobile: isMobile });
            }
        } else {
            domStyle = (0, _utils.getDomCssRule)({ dom: dom, isMobile: isMobile });
        }
        return domStyle;
    };

    this.setDefaultData = function (_ref3) {
        var isMobile = _ref3.isMobile,
            dom = _ref3.dom,
            classState = _ref3.classState,
            cssName = _ref3.cssName;

        // 删除所有编辑的样式，，获取当前 dom 自身的值；
        var editStyle = _this2.rmEditorStyle(dom);
        _this2.defaultValue[classState] = cssName === _this2.editClassName || !cssName ? _this2.getDefaultValue(dom, isMobile, classState) : (0, _utils.getClassNameCssRule)({ dom: dom, className: cssName, isMobile: isMobile, state: null, getObject: true });
        _this2.defaultData = _this2.getDefaultData(_this2.defaultValue[classState]);
        _this2.reEditorStyle(editStyle);
    };

    this.getAllCssString = function () {
        var _state5 = _this2.state,
            cssName = _state5.cssName,
            cssValue = _state5.cssValue;

        var cssStr = '';
        var cssValueArray = Object.keys(cssValue).sort(function (a, b) {
            return b === cssName ? -1 : 0;
        });
        cssValueArray.forEach(function (key) {
            var $cssValue = cssValue[key];
            cssStr += _this2.cssObjectToString($cssValue.css, key);
            cssStr += '\n';
        });
        cssStr += '\n' + _utils.mobileTitle + '\n';
        cssValueArray.forEach(function (key) {
            var $cssValue = cssValue[key];
            cssStr += _this2.cssObjectToString($cssValue.mobileCss, key);
            cssStr += '\n';
        });
        cssStr += '\n}';
        return cssStr;
    };

    this.getCurrentEditCssString = function () {
        var _state6 = _this2.state,
            cssName = _state6.cssName,
            cssValue = _state6.cssValue;

        var currentCss = '';
        var value = cssValue[cssName];
        currentCss += _this2.cssObjectToString(value.css, cssName);
        currentCss += '\n';
        var mobileCss = _this2.cssObjectToString(value.mobileCss, cssName);
        if (mobileCss) {
            currentCss += '\n' + _utils.mobileTitle + '\n';
            currentCss += mobileCss;
            currentCss += '\n}';
        }
        return currentCss;
    };

    this.setCssToDom = function (isDrag) {
        var _state7 = _this2.state,
            cssName = _state7.cssName,
            cssValue = _state7.cssValue;
        var css = cssValue[cssName].css;
        var _props6 = _this2.props,
            editorElem = _props6.editorElem,
            onChange = _props6.onChange,
            cssToDom = _props6.cssToDom,
            editorDefaultClassName = _props6.editorDefaultClassName;

        _this2.cssString = _this2.getAllCssString();
        _this2.currentEditCssString = _this2.getCurrentEditCssString();
        if (cssName) {
            if (cssToDom) {
                _this2.setStyleToDom();
            }
        } else {
            editorElem.style.cssText = css['default'];
        }
        var $cssName = cssName === _this2.editClassName ? cssName + '-' + editorDefaultClassName : cssName;
        onChange({
            parentClassName: _this2.parentClassName,
            cssValue: cssValue,
            cssName: $cssName,
            id: _this2.getEditId($cssName),
            editClassName: _this2.editClassName,
            allCssString: _this2.cssString,
            currentEditCssString: _this2.currentEditCssString,
            isDrag: isDrag
        });
    };

    this.setStyleToDom = function () {
        var cssName = _this2.state.cssName;
        var editorDefaultClassName = _this2.props.editorDefaultClassName;
        // 如果是自定义样式或生成的样式插入到 body
        // const noDefault = !this.classNameInDefaultDomClass(cssName, editorDefaultClassName);

        var id = _this2.getEditId(cssName === _this2.editClassName ? cssName + '-' + editorDefaultClassName : cssName); // `${this.parentClassName} .${cssName}`;
        var style = _this2.ownerDocument.getElementById(id);
        // 通用插入到 head;
        if (style) {
            style.remove();
        }
        style = _this2.createStyle(id);
        style.innerHTML = _this2.currentEditCssString;
    };

    this.setEditorElemClassName = function () {
        var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this2.props;
        var editorElem = props.editorElem,
            editorDefaultClassName = props.editorDefaultClassName;
        var cssName = _this2.state.cssName;


        if (!_this2.classNameInDefaultDomClass(cssName, editorDefaultClassName)) {
            editorElem.className = (0, _utils.removeMultiEmpty)(_this2.defaultDomClass + ' ' + cssName + '-' + editorDefaultClassName).trim();
        }
    };

    this.setDefaultState = function (dom, props) {
        var editorDefaultClassName = props.editorDefaultClassName,
            isMobile = props.isMobile,
            parentClassNameCanUseTagName = props.parentClassNameCanUseTagName,
            parentClassNameLength = props.parentClassNameLength,
            rootSelector = props.rootSelector;

        _this2.ownerDocument = dom.ownerDocument;
        _this2.editClassName = _this2.getClassName(props);
        _this2.prevParentClassName = _this2.parentClassName;
        _this2.parentClassName = (0, _utils.getParentClassName)(dom, rootSelector, parentClassNameCanUseTagName, parentClassNameLength);
        // 当前带样式的 value;
        var classState = 'default';
        var domStyle = _this2.getDefaultValue(dom, isMobile, classState);
        var value = _this2.getDefaultData(domStyle);
        // 获取默认初始化；
        _this2.setDefaultData({
            isMobile: isMobile, dom: dom, classState: classState
        });
        // 获取初始化样式
        _this2.defaultDomClass = (0, _utils.removeEditClassName)(dom.className || '', editorDefaultClassName);
        // 获取当前样式的初始值；
        var cssValue = _this2.getStateCSSValue(_this2.editClassName, classState, domStyle, value, props);
        return {
            cssValue: cssValue,
            cssName: _this2.editClassName,
            classState: classState
        };
    };

    this.getClassName = function (props) {
        var editorElem = props.editorElem,
            editorDefaultClassName = props.editorDefaultClassName;

        var currentEditorCssName = (editorElem.className || '').split(' ').filter(function (name) {
            return name.indexOf(editorDefaultClassName) >= 0;
        }).map(function (name) {
            return name.replace('-' + editorDefaultClassName, '');
        })[0];
        var random = currentEditorCssName || editorElem.getAttribute('data-editor_css_rand') || (0, _utils.getRandomKey)();
        editorElem.setAttribute('data-editor_css_rand', random);
        return _this2.props.useClassName ? random : '';
    };

    this.getDefaultCssData = function (className) {
        var css = {
            css: {
                'default': '',
                hover: '',
                active: '',
                focus: ''
            },
            mobileCss: {
                'default': '',
                active: '',
                focus: ''
            }
        };
        var id = _this2.getEditId(className);
        var style = _this2.ownerDocument.getElementById(id);
        if (_this2.props.useClassName && style) {
            // 样式叠加型式。
            var styleText = style.innerHTML;
            var cssArr = styleText.split(_utils.mobileTitle);
            Object.keys(css).forEach(function (name, i) {
                var string = cssArr[i];
                if (string) {
                    string = string.replace(/\}[\n|\s+]\}/, '}');
                    Object.keys(css[name]).forEach(function (key) {
                        var regName = '' + className + (key !== 'default' ? ':' + key : '');
                        if (string.match(new RegExp(regName, 'ig'))) {
                            css[name][key] = (0, _utils.getCssStr)(string, regName);
                        }
                    });
                }
            });
        }
        return css;
    };

    this.getDefaultData = function (style) {
        if (!style) {
            return null;
        }
        var borderBool = style.borderStyle !== 'none' && style.borderColor !== '0px' || style.borderTopStyle !== 'none' && style.borderTopColor !== '0px' || style.borderRightStyle !== 'none' && style.borderRightColor !== '0px' || style.borderBottomStyle !== 'none' && style.borderBottomColor !== '0px' || style.borderLeftStyle !== 'none' && style.borderLeftColor !== '0px';
        return {
            state: {
                cursor: style.cursor || 'auto'
            },
            layout: {
                display: style.display,
                // 只支持 row 布局
                alignItems: style.alignItems || 'stretch',
                justifyContent: style.justifyContent || 'flex-start'
            },
            font: {
                family: style.fontFamily,
                size: style.fontSize,
                weight: (0, _utils.convertData)(style.fontWeight) || 'normal',
                lineHeight: (0, _utils.convertData)(style.lineHeight),
                color: (0, _utils.convertDefaultData)(style.color),
                letterSpacing: (0, _utils.convertData)(style.letterSpacing),
                align: (0, _utils.convertDefaultData)(style.textAlign) || 'left',
                decoration: (0, _utils.convertData)(style.textDecoration || style.textDecorationLine) || 'none'
            },
            'interface': {
                overflow: (0, _utils.convertDefaultData)(style.overflow) || 'visible',
                width: (0, _utils.convertData)(style.width),
                maxWidth: (0, _utils.convertData)(style.maxWidth),
                minWidth: (0, _utils.convertData)(style.minWidth),
                height: (0, _utils.convertData)(style.height),
                maxHeight: (0, _utils.convertData)(style.maxHeight),
                minHeight: (0, _utils.convertData)(style.minHeight),
                position: (0, _utils.convertDefaultData)(style.position) || 'static',
                top: (0, _utils.convertDefaultData)((0, _utils.convertData)(style.top, true)),
                right: (0, _utils.convertDefaultData)((0, _utils.convertData)(style.right, true)),
                bottom: (0, _utils.convertDefaultData)((0, _utils.convertData)(style.bottom, true)),
                left: (0, _utils.convertDefaultData)((0, _utils.convertData)(style.left, true)),
                zIndex: style.index || 0,
                float: style.float || 'none',
                clear: style.clear || 'none',
                opacity: parseFloat(style.opacity) === 0 || parseFloat(style.opacity) ? parseFloat(style.opacity) : 1
            },
            background: {
                color: (0, _utils.convertDefaultData)(style.backgroundColor),
                image: (0, _utils.getBgDefaultData)(style)
            },
            border: {
                style: (0, _utils.convertBorderData)(style.borderStyle || (style.borderTopStyle || style.borderRightStyle || style.borderBottomStyle || style.borderLeftStyle ? {
                    top: style.borderTopStyle,
                    right: style.borderRightStyle,
                    bottom: style.borderBottomStyle,
                    left: style.borderLeftStyle
                } : null), style.borderWidth) || 'none',
                color: borderBool && (0, _utils.convertBorderData)(style.borderColor || (style.borderTopColor || style.borderRightColor || style.borderBottomColor || style.borderLeftColor ? {
                    top: style.borderTopColor,
                    right: style.borderRightColor,
                    bottom: style.borderBottomColor,
                    left: style.borderLeftColor
                } : null), style.borderWidth) || null,
                width: (0, _utils.convertBorderData)(style.borderWidth || (style.borderTopWidth || style.borderRightWidth || style.borderBottomWidth || style.borderLeftWidth ? {
                    top: style.borderTopWidth,
                    right: style.borderRightWidth,
                    bottom: style.borderBottomWidth,
                    left: style.borderLeftWidth
                } : null)),
                radius: (0, _utils.convertBorderData)(style.borderRadius || (style.borderTopLeftRadius || style.borderTopRightRadius || style.borderBottomRightRadius || style.borderBottomLeftRadius ? {
                    'top-left': style.borderTopLeftRadius,
                    'top-right': style.borderTopRightRadius,
                    'bottom-right': style.borderBottomRightRadius,
                    'bottom-left': style.borderBottomLeftRadius
                } : null), null, true)
            },
            margin: {
                margin: (0, _utils.convertBorderData)(style.margin || {
                    top: style.marginTop,
                    right: style.marginRight,
                    bottom: style.marginBottom,
                    left: style.marginLeft
                }),
                padding: (0, _utils.convertBorderData)(style.padding || {
                    top: style.paddingTop,
                    right: style.paddingRight,
                    bottom: style.paddingBottom,
                    left: style.paddingLeft
                })
            },
            shadow: {
                boxShadow: (0, _utils.convertShadowData)(style.boxShadow),
                textShadow: (0, _utils.convertShadowData)(style.textShadow)
            },
            transition: style.transition
        };
    };

    this.getChildren = function (props) {
        var _state8 = _this2.state,
            cssValue = _state8.cssValue,
            cssName = _state8.cssName,
            classState = _state8.classState;
        var _cssValue$cssName3 = cssValue[cssName],
            css = _cssValue$cssName3.css,
            mobileCss = _cssValue$cssName3.mobileCss,
            value = _cssValue$cssName3.value;

        var myCss = props.isMobile ? mobileCss : css;
        var stateValue = { cursor: value.state.cursor, classState: classState };
        var classNameArray = _this2.defaultDomClass.split(' ').filter(function (c) {
            return c;
        });
        if (props.children) {
            _this2.select = {};
            return (0, _utils.toArrayChildren)(props.children).map(function (item) {
                var itemProps = (0, _objectWithoutProperties3['default'])(item.props, []);

                var key = item.type.componentName;
                if (_this2.select[key]) {
                    return console.warn('child(' + key + ') component is repeat.');
                }
                _this2.select[key] = true;
                itemProps.key = itemProps.key || key;
                if (key === 'EditorCss') {
                    if (!_this2.props.useClassName) {
                        return null;
                    }
                    itemProps.value = myCss[classState];
                    itemProps.cssName = cssName;
                    itemProps.onChange = _this2.onCssChange;
                } else if (key === 'EditorState') {
                    itemProps.showClassState = _this2.props.useClassName;
                    itemProps.value = stateValue;
                    itemProps.onChange = _this2.onStateChange;
                    itemProps.isMobile = _this2.props.isMobile;
                } else if (key === 'EditorClassName') {
                    if (!_this2.props.useClassName) {
                        return null;
                    }
                    itemProps.value = cssName;
                    itemProps.editClassName = _this2.editClassName;
                    itemProps.placeholder = _this2.props.editorDefaultClassName;
                    itemProps.classNameArray = classNameArray;
                    itemProps.onChange = _this2.onClassNameChange;
                } else if (key === 'EditorBackGround') {
                    itemProps.editorElem = props.editorElem;
                    itemProps.value = value.background;
                    itemProps.onChange = _this2.onChange;
                    itemProps.imageSelect = props.imageSelect;
                    itemProps.onImageSelectClick = props.onImageSelectClick;
                } else {
                    itemProps.onChange = _this2.onChange;
                    itemProps.value = value[key.toLocaleLowerCase().replace('editor', '')];
                }
                itemProps.locale = props.locale[key];
                return (0, _react.cloneElement)(item, itemProps);
            }).filter(function (c) {
                return c;
            });
        }
        return [_this2.props.useClassName && _react2['default'].createElement(_ClassName2['default'], {
            onChange: _this2.onClassNameChange,
            value: cssName,
            classNameArray: classNameArray,
            placeholder: _this2.props.editorDefaultClassName,
            key: 'EditorClassName',
            locale: props.locale.EditorClassName,
            editClassName: _this2.editClassName
        }), _react2['default'].createElement(_State2['default'], {
            onChange: _this2.onStateChange,
            key: 'EditorState',
            locale: props.locale.EditorState,
            showClassState: _this2.props.useClassName,
            value: stateValue,
            isMobile: _this2.props.isMobile
        }), _react2['default'].createElement(_Layout2['default'], {
            onChange: _this2.onChange,
            key: 'EditorLayout',
            locale: props.locale.EditorLayout,
            value: value.layout
        }), _react2['default'].createElement(_Font2['default'], {
            onChange: _this2.onChange,
            key: 'EditorFont',
            value: value.font,
            locale: props.locale.EditorFont
        }), _react2['default'].createElement(_Interface2['default'], {
            onChange: _this2.onChange,
            key: 'EditorInterface',
            value: value['interface'],
            locale: props.locale.EditorInterface
        }), _react2['default'].createElement(_BackGround2['default'], {
            onChange: _this2.onChange,
            key: 'EditorBackGround',
            value: value.background,
            locale: props.locale.EditorBackGround,
            editorElem: props.editorElem,
            imageSelect: props.imageSelect,
            onImageSelectClick: props.onImageSelectClick
        }), _react2['default'].createElement(_Border2['default'], {
            onChange: _this2.onChange,
            key: 'EditorBorder',
            value: value.border,
            locale: props.locale.EditorBorder
        }), _react2['default'].createElement(_Margin2['default'], {
            onChange: _this2.onChange,
            key: 'EditorMargin',
            value: value.margin,
            locale: props.locale.EditorMargin
        }), _react2['default'].createElement(_Shadow2['default'], {
            onChange: _this2.onChange,
            key: 'EditorShadow',
            value: value.shadow,
            locale: props.locale.EditorShadow
        }), _react2['default'].createElement(_Transition2['default'], {
            onChange: _this2.onChange,
            key: 'EditorTransition',
            value: value.transition,
            locale: props.locale.EditorTransition
        }), _react2['default'].createElement(_Css2['default'], {
            onChange: _this2.onCssChange,
            key: 'EditorCss',
            value: myCss[classState],
            cssName: cssName,
            locale: props.locale.EditorCss
        })];
    };

    this.rmEditorStyle = function (dom) {
        var className = dom.className;
        var editStyle = {};
        className.split(' ').filter(function (c) {
            return c;
        }).forEach(function (str) {
            var id = _this2.getEditId(str);
            var style = _this2.ownerDocument.getElementById(id);
            if (style) {
                editStyle[id] = style.innerHTML;
                style.innerHTML = '';
            }
        });
        return editStyle;
    };

    this.reEditorStyle = function (editStyle) {
        Object.keys(editStyle).forEach(function (id) {
            var style = _this2.ownerDocument.getElementById(id);
            style.innerHTML = editStyle[id];
        });
    };

    this.cssObjectToString = function (css, name) {
        var _props7 = _this2.props,
            rootSelector = _props7.rootSelector,
            editorElem = _props7.editorElem;

        var cssName = !_this2.classNameInDefaultDomClass(name, _this2.props.editorDefaultClassName) ? name + '-' + _this2.props.editorDefaultClassName : name;
        return Object.keys(css).sort(function (a, b) {
            return stateSort[a] > stateSort[b];
        }).map(function (key) {
            var className = _this2.parentClassName === rootSelector && Array.prototype.slice.call(_this2.ownerDocument.querySelectorAll(rootSelector)).some(function (c) {
                return c === editorElem;
            }) ? _this2.parentClassName + '.' + cssName : _this2.parentClassName + ' .' + cssName;
            switch (key) {
                case 'default':
                    return css[key] ? className + ' {\n' + css[key] + '\n}' : '';
                default:
                    return css[key] ? className + ':' + key + ' {\n' + css[key] + '\n}' : '';
            }
        }).filter(function (c) {
            return c;
        }).join('\n');
    };

    this.createStyle = function (id) {
        var style = _this2.ownerDocument.createElement('style');
        style.id = id;
        // this.ownerDocument[n ? 'body' : 'head'].appendChild(style);
        _this2.ownerDocument.body.appendChild(style);
        return style;
    };

    this.classNameInDefaultDomClass = function (name, editorDefaultClass) {
        return _this2.defaultDomClass.split(' ').some(function (key) {
            return key === name || key === name + '-' + editorDefaultClass;
        });
    };
};

EditorList.ClassName = _ClassName2['default'];
EditorList.State = _State2['default'];
EditorList.Font = _Font2['default'];
EditorList.BackGround = _BackGround2['default'];
EditorList.Border = _Border2['default'];
EditorList.Interface = _Interface2['default'];
EditorList.Margin = _Margin2['default'];
EditorList.Shadow = _Shadow2['default'];
EditorList.Css = _Css2['default'];
EditorList.Transition = _Transition2['default'];
EditorList.Layout = _Layout2['default'];
exports['default'] = (0, _reactLifecyclesCompat.polyfill)(EditorList);
module.exports = exports['default'];